<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>怪异盒子模型</title>
    <style>
        #box1{
            background: #35ac5d;
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 1px red solid;

        }
        #box2{
            background: #35ac5d;
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 1px red solid;
            box-sizing: border-box;
        }
        #box3{
            margin-top: 20px;
            background: #9c2b9c;
            width: 200px;
            height: 200px;

        }

        /*
        padding的宽高要记录在盒子模型的宽高之内，border也要记录在盒子模型的宽高之内，但是margin并不算在宽高之内。所以在书写宽高时
        要注意减掉padding和border的距离（标准盒子模型），怪异盒子模型则设置完宽高属性不会随着padding和border进行变化
        */
    </style>
</head>
<body>

<div id="box1">标准盒子模型</div>
<div id="box2">怪异盒子模型</div>
<div id="box3">未设置内边距属性</div>
</body>
</html>